import {Badge, Button, Card, Divider} from "antd-mobile";
import dayjs from "dayjs";
import {VerticalLine} from "../../../utils/UtilsComponent";
import {useEffect, useState} from "react";
import {fetchStationById} from "../../../utils/http/StationController";

interface BusProps {
    time: Date,
    from: string,
    to: string,
    price: number,
    num: number,
    bus_no: string
}
const BusCard = (props: any) => {
    const noSpace = {
        padding: 0,
        margin: 0
    };

    const [from, setFrom] = useState<any>(null);
    const [to, setTo] = useState<any>(null);

    useEffect(()=>{
        if (!from && !to){
            fetchStationById(props.startStation)
                .then(res=> {
                    setFrom(res.name);
                });
            fetchStationById(props.endStation)
                .then(res=>setTo(res.name));
        }
    });

    return (
        <Card style={{
            marginBottom: "1rem"
        }}>
            <div style={{display: "flex", justifyContent: "space-between"}}>
                <div>
                    <h3 style={{fontSize: "1.5rem", fontWeight: "bold", ...noSpace}}>{dayjs(props.fromTime).format("HH:mm")}</h3>
                    <Badge color={"orange"} style={{fontSize: "0.7rem", padding: "5px"}} content={"班车出行"} />
                </div>
                <div>
                    <p style={{...noSpace}}>{from}</p>
                    {VerticalLine("gray", 30)}
                    <p style={{...noSpace}}>{to}</p>
                </div>
                <div>
                    <p style={{fontSize: "1.5rem", fontWeight: "bold", color: "orangered" , ...noSpace}}>￥{props.price}</p>
                    <p style={{...noSpace}}>{props.bus.persons}张</p>
                </div>
            </div>
            <Divider />
            <p style={{width: "100%", textAlign: "end", ...noSpace}}>车牌号：{props.busNum}</p>
            <Button color="primary" block size="small" style={{
                marginTop: '0.5rem'
            }} onClick={()=>{
                props.onBuy(props.id);
            }}>购买</Button>
        </Card>
    );
}

export default BusCard;
